import * as map3d from "../../../bundle/et__vite/et_vite/DEV/earthquake/main/index";
let gui = new dat.GUI();
gui.domElement.style.position = "absolute"; // 或 'relative'
gui.domElement.style.left = "0px";
gui.domElement.style.top = "0px";

///////////////////////////////调用////////////////////////////////////////////////////////////
// import * as map3d from "./loader.es.js"; //引入方法包
window.map3d = map3d;
await map3d.initViewer("map3d"); //初始化

// var wmsLayer = new Cesium.WebMapServiceImageryProvider({
//   url: "https://iserver.supermap.io/iserver/services/map-china400/wms130/China_4326/",
//   layers: "0", // 替换为实际要加载的图层名称
//   format: "image/png",
//   layerIndex: 200,
//   parameters: {
//     service: "WMS",
//     transparent: true,
//     version: "1.3.0",
//     format: "image/png",
//   },
//   getFeatureInfoParameters: {
//     query_layers: "0.1",
//     INFO_FORMAT: "application/geojson",
//     version: "1.3.0",
//     crs: "CRS:84",
//   },
// });

// viewer.imageryLayers.raiseToTop(wmsLayer);

setTimeout(() => {
  // viewer.imageryLayers.addImageryProvider(wmsLayer);
  // wmsLayer.alpha = 0.1;
  // map3d.inputtMark(110, 20); // 根据经纬度 坐标测量
  return;
  // 绘制震中图元组
  /////map3d.printCirclesText( [经度,纬度],  [100, 50, 20, 10])
  ///// map3d.printCirclesText ()  传空参数清除整组绘制
  let center = [106.517045, 29.572973];
  let arrRadius = [100, 50, 20, 10];
  map3d.printCirclesText(center, arrRadius);
  map3d.switchViewMode("2"); // 数字2  数字 3     2d  3d   切换
}, 2000);

//标记
////获取当前选中或者刚创建的图元:
let nowMarkItem = null;
viewEvent.on("nowMarkItem", (item) => {
  // 鼠标操作每次点击和绘制时到某个图元触发
  nowMarkItem = item;
  // console.log(item);
  // console.log("点击图元:", nowMarkItem);
  ////搜索 changeNowMarkItem 得到修改 图元样式的方法
});

const toDoWithmarkFinished = (item) => {
  // console.log(item);
  console.log(JSON.stringify(item.toGeoJSON()));
};

//绑定事件
//// markFinished  标记绘制双击完成时触发
viewEvent.on("markFinished", toDoWithmarkFinished);

// 注销事件:
// viewEvent.off("markFinished", toDoWithmarkFinished);

setTimeout(() => {
  return;
  //// 后台数据回显到地图标注组上
  let jsondata = JSON.stringify({
    type: "Feature",
    properties: {
      isDataDraw: true,
      id: "M-89A08131-C678-4897-AD81-05E07EFC512B",
      type: "polyline",
      style: {
        color: "rgb(255,164,48)",
        width: 48,
        materialType: "PolylineArrow",
      },
    },
    geometry: {
      type: "LineString",
      coordinates: [
        [106.31643, 29.682707, 271.9],
        [106.813271, 29.296092, 451.3],
      ],
    },
  });
  //// 后台数据回显到地图标注组上
  map3d.drawMarkBydata(jsondata); // 单个图元添加,
}, 3000);

/////////////////////////////////////////////////////
let mark = gui.addFolder("标记");
// mark.open();
let options_mark = {
  获取所有标记: () => {
    let list = map3d.getAllMarks(); //
    console.log(list);
  },
  清除标记: () => {
    map3d.clearMarks(); // 清除标记
  },
  点击定位: () => {
    let op = {
      scale: 1,
      image: `img/1.png`,
      labelText: "", // 不需要就 传 ''
      labelFontSize: 26,
      labelColor: "#ffffff",
      labelOutline: true,
      labelOutlineColor: "#000000",
      labelPixelOffsetY: -60,
    };
    map3d.pointMark(op); // 点击绘点
  },
  某个图元显隐: () => {
    //测试当前选中的图元显示隐藏控制
    if (nowMarkItem) {
      nowMarkItem.show = !nowMarkItem.show;
    }
  },
  某个图元删除: () => {
    //测试当前选中的图元删除, 从内存中删除
    if (nowMarkItem) {
      nowMarkItem.destroy();
    }
  },
  线: () => {
    let option = {
      // width: 3,
      color: "#ffa430",
      isArrow: false,
    };
    map3d.printLine(option);
  },
  多边形: () => {
    let option = {
      color: "#ff453e",
      opacity: 0.5,
      outline: true,
      outlineColor: "#fff9e8",
      outlineWidth: 2.0,
      // clampToGround = false, // 如果需要，可以添加这个选项
    };
    map3d.printPolygon(option); // 绘多边形 "自由面"
  },
  圆: () => {
    let op = {
      color: "#ffff00",
      opacity: 0, // 透明度为0即圆形线
      outlineOpacity: 1,
      outline: true,
      outlineColor: "#e81f58",
      outlineWidth: 3.0,
      clampToGround: true,
    };
    map3d.drawCircle(op); // 绘圆 // 传入透明度，0 时为绘制 ”圆形线“，比如 0.3 为 ”圆形线面"
  },
  矩形: () => {
    let op = {
      color: "#ffff00",
      opacity: 0.5, // 0 为矩形线
      outlineOpacity: 1,
      outline: true,
      outlineColor: "#ffffff",
      outlineWidth: 2.0,
      clampToGround: true,
    };
    map3d.drawRectangle(op); // 绘矩形 // 传入透明度，0 时为绘制 ”矩形线“，比如 0.3 为 "矩形"
  },
  细直箭头: () => {
    let option = {
      width: 26,
      color: "#ff0000",
      isArrow: true, //细直箭头,
    };
    map3d.printLine(option);
  },
  直箭头: () => {
    let option = {
      color: "#ff0000",
      opacity: 0.6,
    };
    map3d.drawStraightArrow(option);
  },
  弯箭头: () => {
    let option = {
      color: "#ff0000",
      opacity: 0.6,
    };
    map3d.drawCurvueArrow(option);
  },

  文字标注: () => {
    let op = {
      text: "文字标注",
      color: "#0081c2",
      fontSize: 26,
      outline: true,
      outlineColor: "#ffffff",
      outlineWidth: 2,
    };
    map3d.textMark(op); // 文字标注 // textMark('内容', fontSize) fontSize 可不传默认 26
  },
  // geojson获取: () => {
  //   console.log(map3d.getMarkGeoJson());
  // },
  color: "#0081c2",
  outlineColor: "#0081c2",
  width: 2,
};
Object.entries(options_mark).forEach(([key, value]) => {
  if (typeof value === "function") {
    mark.add({ [key]: value }, key).name(key.replace(/([A-Z])/g, " $1").trim());
  } else if (key.includes("color")) {
    // 如果是颜色属性，则添加颜色选择器
    mark
      .addColor(options_mark, key)
      .name(key)
      .onFinishChange((val) => {
        map3d.changeNowMarkItem(nowMarkItem, { color: val });
      });
  } else if (key.includes("outlineColor")) {
    mark
      .addColor(options_mark, key)
      .name(key)
      .onFinishChange((val) => {
        map3d.changeNowMarkItem(nowMarkItem, { outlineColor: val });
      });
  } else if (key.includes("width")) {
    mark
      .add(options_mark, key, 1, 10)
      .name(key)
      .step(0.1)
      .onFinishChange((val) => {
        console.log(`${key} 宽度改变为:`, val);
        map3d.changeNowMarkItem(nowMarkItem, { width: val });
      });
  }
});

////测量
let measure = gui.addFolder("测量");
// measure.open();
let options_measure = {
  清除测量: () => {
    map3d.clearMeasure();
  },
  空间距离: () => {
    map3d.measureDis(); //
  },
  贴地距离: () => {
    map3d.measureDis(true);
  },
  高度差: () => {
    map3d.heightMeasure(); //
  },
  水平面积: () => {
    map3d.measureArea(); //
  },
  贴地面积: () => {
    map3d.measureArea(true); //
  },
  角度: () => {
    //方位测量?
    map3d.measureAngle(); //
  },
  三角测量: () => {
    map3d.triangleMeasure(); //
  },
  坐标测量: () => {
    map3d.measurePos(); //
  },
};

Object.entries(options_measure).forEach(([key, func]) => {
  measure.add({ [key]: func }, key).name(key.replace(/([A-Z])/g, " $1").trim());
});
////空间分析
let analyse = gui.addFolder("空间分析");
// analyse.open();
let options_analyse = {
  // 日照分析: () => {
  //   // map3d.distance(); //
  // },
  可视域: () => {
    map3d.viewShed(); // 清除可视域map3d.clearViewShed()
  },

  方量分析: () => {
    map3d.squareAnalysis(); //  测量的清除  方量只能map3d.clearMeasure()来清除
  },
  地形开挖: () => {
    map3d.dig(); //    //   清除开挖map3d.clearDig()
  },
  坡度坡向: () => {
    map3d.slopeAnalys(); //   清除 map3d.clearSlopAnalys()
  },
  地表透明: false, // 简单布尔值控制，默认值为 false
  卷帘: false, // 简单布尔值控制，默认值为 false
};

Object.entries(options_analyse).forEach(([key, func]) => {
  if (typeof func === "boolean") {
    // 为布尔值创建开关控制
    analyse
      .add(options_analyse, key)
      .name(key)
      .onChange((value) => {
        if (key === "卷帘") {
          map3d.switchSplitScreen(value); // 卷帘开关
        } else if (key === "地表透明") {
          map3d.alphaUnderground(value, value ? 0.2 : 1); // 地表透明开关
        }
      });
  } else {
    // 为方法创建按钮
    analyse
      .add({ [key]: func }, key)
      .name(key.replace(/([A-Z])/g, " $1").trim());
  }
});
///////其他//////
let options = {
  地形检测: false,
  日照阴影: false,
  时间轴: false,
  专题制图: () => {
    map3d.expImage(true);
  },
  当前图像base64: async () => {
    let base64Pic = await map3d.getBase64();
    console.log(base64Pic);
  },
  /////视角书签/////
  当前视角参数: () => {
    console.log(map3d.getCameraSet());
  },
  设置视角: () => {
    /// cameraMoveTo的参数需要从 map3d.getCameraSet()获取
    map3d.cameraMoveTo({
      lat: 24.334425,
      lng: 91.830673,
      alt: 124066,
      heading: 350,
      pitch: -31,
    });
  },
};
let others = gui.addFolder("其他");
// others.open();
Object.entries(options).forEach(([key, func]) => {
  if (typeof func === "boolean") {
    others
      .add(options, key)
      .name(key)
      .onChange((value) => {
        if (key === "地形检测") {
          map3d.depthTest(value); //是否开启地形检测;
        } else if (key === "日照阴影") {
          map3d.enableShadow(value); //  是否开启日照阴影
        } else if (key === "时间轴") {
          map3d.enableTimeControl(value); //  是否开启日照阴影
        }
      });
  } else {
    others
      .add({ [key]: func }, key)
      .name(key.replace(/([A-Z])/g, " $1").trim());
  }
});

//////图层切换//////

let layers_gui = gui.addFolder("图层");
let layers = {
  layerName: [
    "天地图影像",
    "天地图电子",
    "高德影像",
    "高德电子",
    "百度影像",
    "百度电子",
  ],
  default: "高德影像",
  注记: true,
  地形: true,
};
layers_gui
  .add(layers, "default", layers.layerName)
  .name("基础底图")
  .onFinishChange((val) => {
    map3d.setBaseMap(val);
    // console.log(viewer.imageryLayers);
  });
layers_gui.add(layers, "注记").onFinishChange((val) => {
  map3d.isShowNamesLayer(val);
});
layers_gui.add(layers, "地形").onFinishChange((val) => {
  map3d.isShowTerrin(val);
});

///测试修改样式"
setTimeout(() => {
  return;
  console.log("测试修改样式");
  map3d.changeNowMarkItem(nowMarkItem, {
    image: "img/2.png",
    scale: 10,
  });
}, 6000);
